<script setup>
import {ref,watch} from 'vue'
  const count = ref(10)
  const cut = ()=>count.value--
  const add = ()=>count.value++
  const money = ref(100)
  const makeMoney = ()=> money.value += 100
  const person = ref({
    name:'张三',
    age:18
  })
  const changeAge = ()=> person.value.age += 1

  // 1. 侦听单个数据
  // 不需要.value
  // watch(count,(newValue,oldValue)=>{
  //    console.log(`新值:${newValue} 旧值:${oldValue}`)
  // })
  // 2. 侦听多个数据
  // watch([count, money], (newValue, oldValue) => {
  //   console.log(`新值:${newValue} 旧值:${oldValue}`)
  // })
  // 3. 侦听复杂数据
  // watch(person, (newValue) => {
  //   console.log(`新值:${newValue.age}`)
  // }, {
  //   deep: true
  // })
  watch(() => person.value.age, (newValue) => {
  console.log(`新值:${newValue}`)
}, {
  immediate: true
})
</script>

<template>
  <div>
    <button @click="cut">-</button>
    <span>{{ count }}</span>
    <button @click="add">+</button>
    <hr>
    <span>{{ money }}</span>
    <button @click="makeMoney">搞钱</button>
    <hr>
    <span>{{ person.age }}</span>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>